<!-- 新增车型 -->
<template>
  <div>
    <el-dialog
      :title="titleInfo.text"
      :visible.sync="dialogFormVisible"
      width="600px"
      @close="resetFormData"
    >
      <el-form
        ref="dataForm"
        :rules="ruleInline"
        :model="formBase"
        label-position="right"
        label-width="110px"
        style="width: 100%"
      >
        <el-form-item
          label="车辆类型"
          prop="name"
        >
          <el-input v-model="formBase.name" placeholder="请输入车辆类型" />
        </el-form-item>
        <el-form-item
          label="应载重量"
          prop="allowableLoad"
        >
          <el-input v-model="formBase.allowableLoad" placeholder="请选择应载重量">
            <template #append>
              <span style="background-color:transparent;">吨</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="应载体积"
          prop="allowableVolume"
        >
          <el-input v-model="formBase.allowableVolume" placeholder="请选择应载体积">
            <template #append>
              <span style="background-color:transparent;">立方</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="长"
          prop="measureLong"
        >
          <el-input v-model="formBase.measureLong" placeholder="0.0" >
            <template #append >
              <span >米</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="宽"
          prop="measureWidth"
        >
          <el-input v-model="formBase.measureWidth" placeholder="0.0">
            <template #append>
              <span style="background-color:transparent;">米</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="高"
          prop="measureHigh"
        >
          <el-input v-model="formBase.measureHigh" placeholder="0.0">
            <template #append>
              <span style="background-color:transparent;">米</span>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          class="save-btn"
          @click="createData"
          type="danger"
        >确认
        </el-button>
        <el-button
          class="cancel-btn"
          @click="dialogFormH"
        >取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { carModeAddAPI } from '@/api/car-models'

export default {
  name: 'CarModelAdd',
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    },
    agencyOptions: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      // 表单验证
      ruleInline: {
        name: [
          { required: true, message: '请输入车辆类型', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '请输入应载体积', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '请输入应载重量', trigger: 'blur' }
        ]
      },
      flag: true
    }
  },
  methods: {
    // 弹层关闭时重置表单数据
    resetFormData() {
      this.$refs['dataForm'].resetFields()
      // 其他数据重置操作
    },
    // 弹层显示
    dialogFormV() {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH() {
      this.dialogFormVisible = false
      this.$refs['dataForm'].resetFields()
    },
    // 表单提交
    createData() {
      if (!this.flag) {
        return
      }
      this.flag = false
      this.$refs['dataForm'].validate(async (valid) => {
        if (valid) {
          console.log(this.formBase)
          const data = this.formBase
          if (this.formBase.id) {
            await carModeAddAPI(data)
              .then((res) => {
                this.dialogFormH()
                if (String(res.code) === '200') {
                  this.$message.success('车型修改成功')
                  this.$emit('resetForm', this.formBase)
                } else {
                  this.$message.error(res.msg || '车型修改失败')
                }
                this.flag = true
              })
              .catch((err) => {
                this.$message.error(err.msg || '车型修改失败')
              })
          } else {
            console.log(data, 1111)
            await carModeAddAPI(data)
              .then((res) => {
                if (String(res.code) === '200') {
                  this.$message.success('新增车型成功')
                  this.$emit('resetForm', this.formBase)
                  this.dialogFormH()
                } else {
                  this.$message.error(res.msg || '车型新增失败')
                }
                this.flag = true
              })
              .catch((err) => {
                this.$message.error(err.msg || '车型运费失败')
              })
          }
        } else {
          this.flag = true
          this.$message.error('请按照提示填写!')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.add-form-dialog {
  ::v-deep .el-dialog__body {
    padding: 40px 66px 0 50px !important;
  }
}
.el-input-group__append{
  background-color: transparent!important;
}
</style>
